<template>
  <div
      class="container"
      :style="{
        top: y + '%',
        left: x + '%',
        width: width + '%',
        height: height + '%',
        opacity: visible ?  1 : 0,
        }"
  >

    <!--    选项div-->
    <div class='option-container'>
      <div v-if="choice1.trim() !== ''" class="image-container" @click="onChoose(action1)">
        <img
            src="https://comps.videohudong.com/ivimg/C1E68A19C7DA0DADA235F55108E2C389601B60A183A7B72B1CA9D29539AE486C.png">
        <span class="text-overlay">{{ choice1 }}</span>
      </div>

      <div v-if="choice2.trim() !== ''" class="image-container" @click="onChoose(action2)">
        <img
            src="https://comps.videohudong.com/ivimg/C1E68A19C7DA0DADA235F55108E2C389601B60A183A7B72B1CA9D29539AE486C.png">
        <span class="text-overlay">{{ choice2 }}</span>
      </div>


      <div v-if="choice3.trim() !== ''" class="image-container" @click="onChoose(action3)">
        <img
            src="https://comps.videohudong.com/ivimg/C1E68A19C7DA0DADA235F55108E2C389601B60A183A7B72B1CA9D29539AE486C.png">
        <span class="text-overlay">{{ choice3 }}</span>
      </div>
    </div>


  </div>

</template>
<script>
export default {

  mounted() {

    // 方法一：通过时间变化判断
    // let duration;
    // this.bridge.on('engine', 'videoNodeChange', (videoInfo) => {
    //   duration = videoInfo.duration;
    // // uri 视频的地址
    // // duration 视频的时长 单位s
    // // streamRatio 视频的宽高比
    //   console.log("视频videoNodeChange 1：",duration)
    // });

    // this.bridge.on('player', 'videoEnd', () => {
    //   console.log("视频 videoEnd")
    //     this.show();
    // });

    this.bridge.on('player', 'timeupdate', time => {
      if (time >= this.startTime) {
        console.log('开始显示选项')
        this.show();
      } else {
        // console.log('开始隐藏')
        // this.hide();
      }


      //   let miliSec = time * 1000 // 单位统一成毫秒
      //   // if(duration > 0 && miliSec >= duration) {
      //   //   console.log('播放结束1')
      //   // }
      //   // 由于部分设备取时间不准确 建议采用以下方式 结束前200ms判断为结束。
      //   if(duration > 0 && miliSec >= duration - 200) {
      //     console.log('播放结束')
      //     this.show();
      //   }else{
      //     this.hide();
      //   }
    });
  },
  methods: {
    onChoose(actionName) {
      // this.action则是上面表单配置的内容
      this.bridge.invoke('engine', 'action', actionName);
      this.visible = false;
    }

  }

};
</script>
<style>
.container {
  position: absolute;
  transition: opacity 1s ease;
}


.option-container {
  display: flex;
  justify-content: center;
}

.image-container {
  position: relative;
  display: inline-block;
  width: 30%;
  height: 20%;
}

.image-container:hover {
  width: 33%;
  height: 22%;
  transition: width .2s ease, height .2s ease;
}

.text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 0.6rem;
  /* 其他样式，如字体、背景色等 */
}
</style>
